<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state</title>
    <style>

    </style>
</head>
<body>
<!--准备好一个容器-->
<div id="root"></div>

<!--引入React核心库-->
<script type="text/javascript" src="../0-ReactJs-v16.14.0/react.development.js"></script>
<!--引入React-Dom，用于支持React操作Dom-->
<script type="text/javascript" src="../0-ReactJs-v16.14.0/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script type="text/javascript" src="../0-ReactJs-v16.14.0/babel.min.js"></script>

<script type="text/babel">
    //1.创建类式组件（三大属性只对类式组件）
    class Weather extends React.Component {

        // constructor(props) {
        //     super(props);
        //     // this.state = {
        //     //     isHot: true
        //     // }
        //     //解决changeWeather中this指向问题
        //     // this.changeWeather = this.changeWeather.bind(this);
        // }

        state = {
            isHot: true
        }

        render() {
            const {isHot} = this.state;
            return (
                <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
            )
        }

        //自定义方法——要用赋值语句的形式+箭头函数
        changeWeather = () => {
            this.setState({
                isHot: !this.state.isHot
            })
        }
    }

    //2.渲染组件到页面
    ReactDOM.render(<Weather/>, document.getElementById('root'));

</script>

</body>


</html>
